import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Image,
  TextInput,
  Text,
  ScrollView,
  TouchableOpacity
} from 'react-native'

import NavBar from '../../../components/PublicHeader';


export default class resume extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 头部标题
      topTitle: "我的简历",
      // 简历
      resumeList: {
        heardUrl: require('../../../assets/images/resume/heardUrl.png'),
        name: '何某某',
        experience: '2年经验',
        education: '大专',
        sexUrl: require('../../../assets/images/introduces/Frame.png'),
        post: '湖南泽钰科技有限公司·ui设计师',
        introduction: '本人性格开朗文本文本文本文本文本文本文本文本文本文本文本文本文本文本'
      },
      // 工作证
      employeesCard: {
        position: 'IT互联网·前端程序',
        name: '何某某',
        sex: '女',
        age: '21',
        phone: '1489208392',
        address: '湖南省 长沙市'
      }
    };
  }

  componentDidMount = () => {


  }

  render() {
    return (
      <View style={styles.warper}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          title={this.state.topTitle}
          titleColor={"#333"}
        />
        <ScrollView style={styles.bodys}>
          {/* 我的简历 */}
          <View style={styles.resume}>
            <View style={styles.resume_view}>
              <Text style={styles.view_text}>我的简历</Text>
              <Text style={styles.view_text2}>+ 添加</Text>
            </View>
            <View style={styles.resume_content}>
              <View style={styles.content_top}></View>
              <View style={styles.content_bodys}>
                <View style={styles.bodys_content}>
                  <Image source={this.state.resumeList.heardUrl} />
                  <View style={styles.bodys_heard}>
                    <Text style={styles.heard_text}>
                      {this.state.resumeList.name}
                      <Image style={styles.sexUrl} source={this.state.resumeList.sexUrl} />
                    </Text>
                    <Text style={styles.heard_text2}>{this.state.resumeList.experience} | {this.state.resumeList.education}</Text>
                  </View>
                </View>
                <TouchableOpacity onPress={() => {
                  this.props.navigation.navigate('editresume')
                }}>
                  <Image source={require('../../../assets/images/resume/edit.png')} />
                </TouchableOpacity>
              </View>
              <View style={styles.content_post}>
                <Image source={require('../../../assets/images/resume/Vector.png')} />
                <Text style={styles.post_text}>{this.state.resumeList.post}</Text>
              </View>
              <View style={styles.content_introduction}>
                <Text style={styles.introduction_text}>{this.state.resumeList.introduction}</Text>
              </View>
            </View>
          </View>
          {/* 工作证 */}
          <View style={styles.employeesCard}>
            <Text style={styles.employeesCard_text}>工作证</Text>
            <View style={styles.employeesCard_content}>
              <View style={styles.information}>
                <Text style={styles.information_position}>{this.state.employeesCard.position}</Text>
                <View style={styles.information_view}>
                  <Text style={styles.information_name}>{this.state.employeesCard.name}</Text>
                  <Text style={styles.information_sex}>{this.state.employeesCard.sex}·{this.state.employeesCard.age}岁</Text>
                </View>
                <View style={styles.information_view}>
                  <Image source={require('../../../assets/images/resume/phone.png')} />
                  <Text style={styles.information_phone}>{this.state.employeesCard.phone}</Text>
                </View>
                <View style={styles.information_view}>
                  <Image style={styles.address_img} source={require('../../../assets/images/resume/address.png')} />
                  <Text style={styles.information_address}>{this.state.employeesCard.address}</Text>
                </View>
              </View>
              <View style={styles.photo}>
                <Image source={require('../../../assets/images/resume/userPhoto.png')} />
              </View>
            </View>
            <View style={styles.bottom}>
              <TouchableOpacity onPress={() => {
                this.props.navigation.navigate('editworkpermit')
              }} style={styles.bottom_view}>
                <Image style={styles.bottom_img} source={require('../../../assets/images/resume/edit2.png')} />
                <Text style={styles.bottom_text}>编辑</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => {
                this.props.navigation.navigate('qrcode', { data: true })
              }} style={styles.bottom_view}>
                <Image style={styles.bottom_img} source={require('../../../assets/images/resume/qrcode.png')} />
                <Text style={styles.bottom_text}>二维码</Text>
              </TouchableOpacity>
            </View>
          </View>
        </ScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent'
  },
  bodys: {
    padding: 15
  },
  resume: {
    display: 'flex',
    flexDirection: 'column',
  },
  resume_view: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  view_text: {
    color: '#444444',
    fontSize: 15
  },
  view_text2: {
    color: '#888888'
  },
  resume_content: {
    backgroundColor: '#fff',
    borderRadius: 8,
    marginTop: 10,
  },
  content_top: {
    height: 20,
    backgroundColor: '#9DD0FF',
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8
  },
  content_bodys: {
    padding: 15,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  bodys_content: {
    display: 'flex',
    flexDirection: 'row',
  },
  bodys_heard: {
    marginLeft: 10
  },
  heard_text: {
    fontSize: 20
  },
  sexUrl: {
    width: 20,
    height: 20
  },
  heard_text2: {
    color: '#00000066'
  },
  content_post: {
    display: 'flex',
    flexDirection: 'row',
    padding: 15,
    justifyContent: 'flex-start'
  },
  post_text: {
    marginLeft: 10,
    marginTop: -3,
    color: '#444444'
  },
  content_introduction: {
    padding: 15
  },
  introduction_text: {
    color: '#00000073'
  },
  employeesCard: {
    marginTop: 20
  },
  employeesCard_text: {
    marginLeft: 10
  },
  employeesCard_content: {
    backgroundColor: '#FFFFFF',
    borderRadius: 8,
    marginTop: 20,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 15
  },
  information: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-around'
  },
  information_view: {
    display: 'flex',
    flexDirection: 'row',
    marginTop: 10
  },
  information_position: {
    fontSize: 23,
    color: '#1890FF'
  },
  information_name: {
    fontSize: 20,
    fontWeight: '900'
  },
  information_sex: {
    fontSize: 15,
    marginLeft: 20,
    color: '#828282',
    marginTop: 3
  },
  information_phone: {
    marginLeft: 20,
    marginTop: -2
  },
  information_address: {
    marginLeft: 20,
    marginTop: -2
  },
  address_img: {
    marginLeft: 2
  },
  photo: {
    marginTop: -40
  },
  bottom: {
    borderBottomLeftRadius: 8,
    borderBottomRightRadius: 8,
    backgroundColor: '#C3E2FF',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    padding: 10
  },
  bottom_view: {
    display: 'flex',
    justifyContent: 'flex-start',
    flexDirection: 'row',
  },
  bottom_text: {
    fontSize: 20,
    marginLeft: 10,
    marginTop: 0,
    color: '#1890FF'
  },
  bottom_img: {
    width: 30,
    height: 30
  }
})